<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="Stacks" border-none></che-toolbar>
<che-description che-link-title="Learn more." che-link="{{branding.docs.stack}}">
  A stack is environment configuration for workspace defined by its runtime recipe. Create workspaces from stacks that define projects, runtimes
  and commands.
</che-description>
<md-content md-scroll-y flex layout="column" md-theme="maincontent-theme">
  <md-progress-linear md-mode="indeterminate" class="stacks-list-progress"
                      ng-show="listStacksController.isLoading"></md-progress-linear>
  <md-content flex class="stacks-list-content" ng-hide="listStacksController.isLoading">
    <che-list-header che-input-placeholder="Search"
                     che-search-model="listStacksController.stackFilter.name"
                     che-on-search-change="listStacksController.onSearchChanged(str)"
                     che-hide-search="listStacksController.stacks.length === 0"
                     che-import-button-title="Add Stack"
                     che-on-import="listStacksController.showSelectStackRecipeDialog($event)"
                     che-delete-button-title="Delete"
                     che-on-delete="listStacksController.deleteSelectedStacks()"
                     che-hide-delete="listStacksController.cheListHelper.isNoItemSelected"
                     che-hide-header="listStacksController.cheListHelper.visibleItemsNumber === 0">
      <div flex="100"
           layout="row"
           layout-align="start stretch"
           class="che-list-item-row">
        <div layout="column" layout-gt-xs="row"
             layout-align="start center"
             class="che-checkbox-area">
          <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
            <md-checkbox class="che-list-item-checkbox"
                         aria-label="Stack list"
                         ng-checked="listStacksController.cheListHelper.areAllItemsSelected"
                         ng-click="listStacksController.cheListHelper.changeBulkSelection()"></md-checkbox>
          </div>
        </div>
        <div flex hide-xs layout-gt-xs="row"
             layout-align="start center"
             class="che-list-item-details">
          <che-list-header-column flex-gt-xs="20"
                                  che-sort-value="listStacksController.stackOrderBy"
                                  che-sort-item="name"
                                  id="sort-stacks-by-name"
                                  che-column-title="Name"></che-list-header-column>
          <che-list-header-column flex-gt-xs="35"
                                  che-column-title="Description"></che-list-header-column>
          <che-list-header-column flex-gt-xs="30"
                                  che-column-title="Components"></che-list-header-column>
          <che-list-header-column flex-gt-xs="18"
                                  che-column-title="Actions"></che-list-header-column>
        </div>
      </div>
    </che-list-header>
    <che-list ng-show="listStacksController.cheListHelper.visibleItemsNumber > 0" class="stack-list">
      <stack-item
              ng-repeat="stack in listStacksController.cheListHelper.getVisibleItems() | orderBy:[listStacksController.stackOrderBy, 'name']"
              ng-model="listStacksController.cheListHelper.itemsSelectionStatus[stack.id]"
              che-selectable="true"
              che-on-checkbox-click="listStacksController.cheListHelper.updateBulkSelectionStatus()"
              che-on-delete="listStacksController.deleteStack(stack)"
              che-on-duplicate="listStacksController.duplicateStack(stack)"
              stack="stack"
              user-id="listStacksController.userId"></stack-item>
    </che-list>
    <div class="che-list-empty">
        <span ng-show="listStacksController.stacks.length > 0 && listStacksController.cheListHelper.visibleItemsNumber === 0">
          No stacks found.
        </span>
      <span ng-show="listStacksController.stacks.length === 0">There are no stacks.</span>
    </div>
  </md-content>
</md-content>
